<template>
  <div class="form">
      <h3>用户添加</h3>
     <el-form  :model="formData" label-width="100px" class="add" label-position="right">
        <el-form-item label="用户名:" class="username">
          <el-input v-model="formData.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="日期：">
          <el-date-picker
            v-model="formData.date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用户头像：">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <!-- 用户头像存在  展示用户头像 -->
            <img v-if="formData.avatar" :src="formData.avatar" class="avatar">
            <!-- 用户头像不存在  展示 + 号图标 -->
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            
          </el-upload>
        </el-form-item>
        <el-form-item label="用户地址：">
          <el-input v-model="formData.address" type="textarea" placeholder="请输入用户地址"></el-input>
        </el-form-item>
         <el-form-item>
          <el-button type="primary" @click="add">立即添加</el-button>
          <el-button @click="$router.push('/user')">取消</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data () {
    return {
      formData: {
        name: '',  // 用户名称
        date: '', // 日期
        address: '', // 地址
        avatar: '' // 头像
      }
    }
  },
  methods: {
      handleAvatarSuccess(res, file) {
        // blob
        // console.log(file.raw)  // 具体文件
        var fr = new FileReader()  // 创建一个文件读取器
        fr.readAsDataURL(file.raw)  // 读取具体文件
        fr.onload = ()=>{ // 读取完毕后，获取读取结果
          // fr.result  读取结果
          this.formData.avatar = fr.result

        }
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      add () {
        // 点击添加  向后端发送请求
        // console.log('点击添加');
        // console.log(this.formData.date.toLocaleDateString())  
        axios.post('/api/add', {
          name: this.formData.name,
          date: this.formData.date.toLocaleDateString(),
          avatar: this.formData.avatar,
          address: this.formData.address
        }).then(({data})=>{
          if (data.code == 200) {
            this.$message({
              message: '新增成功',
              type: 'success',
              duration: 1000,
              onClose: ()=>{
                this.formData = {
                  name: '',  // 用户名称
                  date: '', // 日期
                  address: '', // 地址
                  avatar: '' // 头像
                }
              }
            })
          }
        })
      }
    }
}
</script>

<style scoped>
 .avatar-uploader >>> .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader >>> .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.form{
  background: #fff;
  padding: 15px;
}
.add{
  margin-top: 30px;
}
.username{
  width: 300px;
}
</style>